---
import BaseLayout from "@/layouts/BaseLayout.astro";
import WhiteModule from "@/components/WhiteModule.astro";
import { getEntryBySlug } from "astro:content";
import cfg from "blog.config";
const e = await getEntryBySlug("friends", "friends");
let r = await e?.render(),
  { Content } = r ?? {};
const {
    pages: { friends },
  } = cfg,
  { FriendList } = friends!;
---

<BaseLayout title={`友链 - `}>
  <div class="friends">
    <WhiteModule>
      <h1>友情链接</h1>
      <div class="friends_list">
        {
          FriendList?.length ? (
            FriendList?.map(({ description, name, link, avatar }) => (
              <a class="friend_item" href={link} target="_blank">
                <div class="avatar_wrapper">
                  <img class="w100 h100" src={avatar} alt={name} />
                </div>
                <div class="info">
                  <div class="name text_nowrap">{name}</div>
                  <div class="autograph text_nowrap">{description}</div>
                </div>
              </a>
            ))
          ) : (
            <h3>这里啥都没有...</h3>
          )
        }
      </div>
      {
        e.body.length ? (
          <div class="md">
            <Content />
          </div>
        ) : null
      }
    </WhiteModule>
  </div>
</BaseLayout>

<style lang="scss">
  .friends {
    width: 70%;
    margin: 4rem auto;
    color: var(--text-default);

    :global(.white_module) {
      padding: 2rem 6rem;

      & > h1 {
        text-align: center;
      }
    }

    .friends_list {
      width: 100%;
      display: flex;
      justify-content: start;
      align-items: center;
      align-content: center;
      flex-wrap: wrap;
      margin: 3rem auto;

      .friend_item {
        display: flex;
        width: 33.33%;
        height: 5rem;
        padding: 0 2rem;
        align-items: center;
        transition: background-color 0.1s;
        cursor: pointer;

        &:hover {
          background-color: var(--background-active-default);
        }

        .avatar_wrapper {
          width: 4rem;
          height: 4rem;
          margin-right: 1rem;
          border-radius: 100vh;
          overflow: hidden;
          box-shadow: 0 0 5px 2px #5e5e5e4d;
        }

        .info {
          width: 60%;
          text-align: left;

          .name {
            font-weight: 700;
          }

          .autograph {
            width: 100%;
            // display: -webkit-box;
            // -webkit-box-orient: vertical;
            // -webkit-line-clamp: 2;
            max-height: 2.8rem;
            color: #888;
            font-size: 0.9rem;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }

    .md {
      padding: 3rem;
      border-radius: 1rem;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
  }

  @media screen and (max-width: 1280px) {
    .friends {
      width: 95%;

      .friends_list {
        .friend_item {
          width: 33.33%;
        }
      }

      :global(.white_module) {
        padding: 2rem;
      }
    }
  }

  @media screen and (max-width: 992px) {
    .friends {
      .friends_list {
        .friend_item {
          width: 50%;
          padding: 0 2rem;
        }
      }
    }
  }

  @media screen and (max-width: 576px) {
    .friends {
      .friends_list {
        .friend_item {
          width: 100%;
        }
      }
    }
  }
</style>
